<template>
  <div class="login">
    <div class="login_head">
      <van-image
        width="100%"
        height="10rem"
        fit="contain"
        :src="`${publicPath}img/img.png`"
      />
    </div>
    <div class="login_user">
      <div class="login_portrait">
        <img v-if="user" class="portrait" :src="user.portrait" />
        <h3 v-if="user" class="Headline">{{ user.nickname }}</h3>
      </div>
      <p class="text">欢迎来到未来科学城{{query == 0 ? "园区服务":"员工平台"}}~</p>
    </div>

    <div class="login_from">
      <van-cell-group>
        <van-field
          v-if="query == 0"
          clearable
          @input="error.name = ''"
          :error-message="error.name"
          v-model="form.name"
          :border="false"
          placeholder="请输入姓名或公司名称"
        >
          <template #left-icon>
            <i class="iconfont iconxingming"></i>
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group>
        <van-field
          clearable
          @input="error.mobile = ''"
          type="digit"
          maxlength="11"
          :error-message="error.mobile"
          v-model="form.mobile"
          :border="false"
          placeholder="请输入本人手机号"
        >
          <template #left-icon>
            <i class="iconfont icondianhua"></i>
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group>
        <van-field
          @input="error.sms = ''"
          :error-message="error.sms"
          :border="false"
          v-model="sms"
          center
          clearable
          type="digit"
          maxlength="6"
          placeholder="请输入短信验证码"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
          <template #button>
            <van-button
              @click="getSms"
              :disabled="!!smsT"
              type="primary"
              size="mini"
              >{{ smsT ? `${smsT}s` : "获取验证码" }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>

      <!-- <van-checkbox class="login_checkbox" v-model="checked" shape="square">
				<span class="read">我已阅读</span><span class="sizeColor" @click.stop="agreement">《中城智慧园区使用协议》</span>
			</van-checkbox> -->

      <van-button color="#1375ff" class="fillet" block @click="submit"
        >确认</van-button
      >
    </div>
  </div>
</template>

<script>
import { Button, Image, Field, CellGroup, Checkbox, CheckboxGroup } from "vant";
import {
  wechatCustomer,
  wechatCustomerCreate,
  getSmsCode,
  setUser,
} from "@/api/index";
export default {
  components: {
    [Button.name]: Button,
    [Image.name]: Image,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
  },
  data() {
    return {
      query: 0,
      user: [],
      publicPath: process.env.BASE_URL,
      sms: null,
      // checked:true,
      smsT: 0,
      codeKey: null,
      form: {
        mobile: "",
        name: "",
      },
      error: {
        sms: "",
        name: "",
        mobile: "",
      },
    };
  },
  async mounted() {
    this.user = await wechatCustomerCreate();
    this.query = this.$route.query.id || 0;
  },
  methods: {
    async getSms() {
      if (!this.form.mobile) {
        this.$toast("请先输入手机号码");
        return;
      } else if (this.form.mobile.length < 11) {
        this.$toast("手机号码错误");
        return;
      } else {
        try {
          this.codeKey = await getSmsCode({
            mobile: this.form.mobile,
          });
          this.smsT = 60;
          const smsid = setInterval(() => {
            this.smsT = this.smsT - 1;
            if (this.smsT == 0) {
              clearInterval(smsid);
            }
          }, 1000);
        } catch (e) {
          this.$dialog.alert({
            title: "错误提示",
            message: e.message,
          });
        }
      }
    },
    async submit() {
      if (this.query == 0) {
        if (!this.form.name) {
          this.error.name = "姓名或公司名称错误";
        } else if (!this.form.mobile) {
          this.error.mobile = "手机错误";
        } else if (!this.sms) {
          this.error.sms = "验证码错误";
        } else if (!this.codeKey) {
          this.error.sms = "请获取验证码";
        } else {
          try {
            const res = await wechatCustomer({
              name: this.form.name,
              mobile: this.form.mobile,
              codeKey: this.codeKey.codeKey,
              code: this.sms,
            });
            this.$dialog
              .alert({
                title: "温馨提示",
                message: "绑定成功",
              })
              .then(() => {
                this.$router.replace("/");
              });
          } catch (e) {
            this.$dialog.alert({
              title: "错误提示",
              message: e.message,
            });
          }
        }
      } else {
        if (!this.form.mobile) {
          this.error.mobile = "手机错误";
        } else if (!this.sms) {
          this.error.sms = "验证码错误";
        } else if (!this.codeKey) {
          this.error.sms = "请获取验证码";
        } else {
          try {
            const res = await setUser({
              mobile: this.form.mobile,
              code_key: this.codeKey.codeKey,
              code: this.sms,
            });
            this.$dialog
              .alert({
                title: "温馨提示",
                message: "绑定成功",
              })
              .then(() => {
                this.$router.replace("/contract");
              });
          } catch (e) {
            this.$dialog.alert({
              title: "错误提示",
              message: e.message,
            });
          }
        }
      }
    },
    agreement() {
      this.$router.push("/agree");
    },
  },
};
</script>

<style scoped lang="less">
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: #f6f7fb;
  .login_head {
    margin: 45px auto 35px;
  }
  .login_user {
    margin: 0 16px;
  }
  .login_portrait {
    display: flex;
    align-items: center;
    .portrait {
      width: 35px;
      height: 35px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 9px;
    }
  }
  .text {
    margin-top: 10px;
    color: #8193ae;
  }
  .login_from {
    margin: 30px 16px;
  }
  .login_checkbox {
    margin: 12px auto 25px;
  }
  .iconxingming,
  .iconyanzhengma,
  .icondianhua {
    font-size: 18px;
    color: #1375ff;
  }
}
.van-cell-group {
  margin: 10px auto;
  border-radius: 10px;
}
.van-cell {
  border-radius: 10px;
}
.van-button--primary {
  border: none;
  background-color: #fff;
  color: #1375ff;
  font-size: 13px;
}
.read {
  font-size: 13px;
  color: #8193ae;
}
.sizeColor {
  font-size: 13px;
}
.van-button {
  border-radius: 10px;
}
.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border: none;
}

@media (min-width: 750px) {
  .login {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: #f6f7fb;
    .login_head {
      margin: 45px auto 35px;
    }
    .login_user {
      margin: 0 16px;
    }
    .login_portrait {
      display: flex;
      align-items: center;
      .portrait {
        width: 35px;
        height: 35px;
        object-fit: cover;
        border-radius: 50%;
        margin-right: 9px;
      }
    }
    .text {
      margin-top: 10px;
      color: #8193ae;
    }
    .login_from {
      margin: 30px 16px;
    }
    .login_checkbox {
      margin: 12px auto 25px;
    }
    .iconxingming,
    .iconyanzhengma,
    .icondianhua {
      font-size: 18px;
      color: #1375ff;
    }
  }
  .van-cell-group {
    margin: 10px auto;
    border-radius: 10px;
  }
  .van-cell {
    border-radius: 10px;
  }
  .van-button--primary {
    border: none;
    background-color: #fff;
    color: #1375ff;
    font-size: 13px;
  }
  .read {
    font-size: 13px;
    color: #8193ae;
  }
  .sizeColor {
    font-size: 13px;
  }
  .van-button {
    border-radius: 10px;
  }
  .van-hairline--top-bottom:after,
  .van-hairline-unset--top-bottom:after {
    border: none;
  }
}
</style>
